<template>
    <div>
        <div class="container">
            <n-button @click="back">返回</n-button>
            <n-flex align="center">
                <!-- 标题 -->
                <n-h1>{{ blogIfo.title }}</n-h1>
                {{ timeFormat }}
            </n-flex>

            <!-- 文章内容 -->
            <div class="blog-content">
                <div v-html="blogIfo.content"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";

onMounted(() => {
    loadBlog()
})

const router = useRouter()
const route = useRoute()

const axios = inject('axios')
const message = inject('message')

const blogIfo = ref([])

const back = () => {
    router.push("/")
}

const loadBlog = async () => {
    // console.log(route.query.id);
    try { 
        let res = await axios.get("/api/blog/detail", { params: { id: route.query.id } })
        // console.log(res);
        let temp_row = res.data.data[0]
        blogIfo.value = temp_row
    } catch (error) {
        message.error("数据获取失败");
    }
}

const timeFormat = computed(() => {
    return new Date(blogIfo.value.update_time).toLocaleString()
})
</script>

<style>
.blog-content img {
    max-width: 100% ! important;
}
</style>

<style lang="scss" scoped>
.container {
    width: 800px;
    margin: 0 auto;
}
</style>
